<template>
  <view class="content ba_img">
    <view
      class="header"
      :style="{
        background: isHeadBack ? 'rgba(39,39,39)' : 'rgba(0,0,0,0)',
      }"
    >
      <view class="title"> </view>
      <view class="jiahao" @click="goPage">
        <u-icon size="25" name="setting" color="#EEEEEE"></u-icon>
      </view>
    </view>
    <scroll-view
      :style="{
        // height: '100%',
        height: windowHeight + 'px',
      }"
      :scroll-y="true"
      @scroll="scroll"
      class="box"
    >
      <view class="top" v-if="data.userInfo">
        <view class="top_img">
          <image :src="data.userInfo.avatar_url" mode=""></image>
        </view>
        <view class="top_view">
          <view class="top_view_name" v-if="data.userInfo">{{
            data.userInfo.nick_name
          }}</view>
          <view
            class="top_view_text"
            v-if="data.userInfo"
            @click="goEdit(data.userInfo.user_id)"
          >
            <!-- <view class="top_view_text_icon"></view> -->
            <u-icon size="20" name="edit-pen" color="#EEEEEE"></u-icon>
            <view class="jianjie">{{ data.userInfo.introduce }}</view>
          </view>
        </view>
        <view class="top_view_my" @click="goHome">
          <text> 我的主页 </text>
          <u-icon size="15" name="arrow-right" color="#EEEEEE"></u-icon>
        </view>
      </view>

      <view class="data_view" v-if="data.userInfo">
        <view class="data_view_item">
          <view class="data_view_item_num">{{
            data.userInfo.other.guanzhu
          }}</view>
          <view class="data_view_item_text">关注</view>
        </view>
        <u-line direction="col" length="30"></u-line>
        <view class="data_view_item">
          <view class="data_view_item_num">{{
            data.userInfo.other.dongtai_count
          }}</view>
          <view class="data_view_item_text">动态</view>
        </view>
        <u-line direction="col" length="30"></u-line>
        <view class="data_view_item">
          <view class="data_view_item_num">{{
            data.userInfo.other.xiangce_count
          }}</view>
          <view class="data_view_item_text">相册</view>
        </view>
        <u-line direction="col" length="30"></u-line>
        <view class="data_view_item">
          <view class="data_view_item_num">{{
            data.userInfo.other.youli_count
          }}</view>
          <view class="data_view_item_text">游历</view>
        </view>
      </view>

      <view class="member_view">
        <view class="member_view_top">
          <view class="member_view_top_text">开通一田山海会员</view>
          <view class="member_view_top_btn" @click="goMember">立即查看</view>
        </view>
        <view class="member_view_text">
          <view
            class="member_view_text_item"
            v-for="(item, index) in data.level"
            :key="index"
          >
            {{ item.level_name }}
          </view>
        </view>
      </view>

      <view class="development">
        <view class="development_item" v-if="data.userInfo">
          <view class="development_item_title">我的成长</view>
          <u-grid :border="false" col="3">
            <u-grid-item>
              <text class="grid-text grid-text1">{{
                data.userInfo.other.total_xuexi
              }}</text>
              <text class="grid-text">总学习时长</text>
            </u-grid-item>
            <u-grid-item>
              <text class="grid-text grid-text1">{{
                data.userInfo.other.today_xuexi
              }}</text>
              <text class="grid-text">今日时长</text>
            </u-grid-item>
            <u-grid-item>
              <text class="grid-text grid-text1">{{
                data.userInfo.other.daka_count
              }}</text>
              <text class="grid-text">已打卡次数</text>
            </u-grid-item>
            <u-grid-item>
              <text class="grid-text grid-text1">{{
                data.userInfo.other.xuexi_jie
              }}</text>
              <text class="grid-text">已学节数</text>
            </u-grid-item>
            <u-grid-item>
              <text class="grid-text grid-text1">{{
                data.userInfo.other.ranking
              }}</text>
              <text class="grid-text">积分排名</text>
            </u-grid-item>
          </u-grid>

          <u-toast ref="uToast" />
        </view>

        <view class="development_item">
          <view class="development_item_title">常用功能</view>
          <u-grid :border="false" col="4">
            <u-grid-item
              v-for="(listItem, listIndex) in list1"
              :key="listIndex"
              @click="goDetail(listItem)"
            >
              <u-icon
                :customStyle="{ paddingTop: 20 + 'rpx' }"
                :name="listItem.img"
                :size="25"
                color="#EEEEEE"
              ></u-icon>
              <text class="grid-text">{{ listItem.name }}</text>
            </u-grid-item>
          </u-grid>
          <u-toast ref="uToast" />
        </view>

        <view class="development_item">
          <view class="development_item_title">我的微创</view>
          <u-grid :border="false" col="4">
            <u-grid-item
              v-for="(listItem, listIndex) in list2"
              :key="listIndex"
              @click="goDetail(listItem)"
            >
              <u-icon
                :customStyle="{ paddingTop: 20 + 'rpx' }"
                :name="listItem.img"
                :size="25"
                color="#EEEEEE"
              ></u-icon>
              <text class="grid-text">{{ listItem.name }}</text>
            </u-grid-item>
          </u-grid>
          <u-toast ref="uToast" />
        </view>

        <view class="development_item">
          <view class="development_item_title">我的服务</view>
          <u-grid :border="false" col="4">
            <u-grid-item
              v-for="(listItem, listIndex) in list3"
              :key="listIndex"
              @click="goDetail(listItem)"
            >
              <u-icon
                :customStyle="{ paddingTop: 20 + 'rpx' }"
                :name="listItem.img"
                :size="25"
                color="#EEEEEE"
              ></u-icon>
              <text class="grid-text">{{ listItem.name }}</text>
            </u-grid-item>
          </u-grid>
          <u-toast ref="uToast" />
        </view>

        <view style="height: 40rpx"></view>
      </view>
    </scroll-view>
	<!-- <floatingBall></floatingBall> -->
    <!-- <player ref="player" :show="show" @colse="colse"></player> -->


    <floatingBall></floatingBall>
  </view>
</template>

<script>
import { bofang_list, add_log } from "@/common/api/play.js"; // 播放
export default {
  components: {},
  data() {
    return {
      statusBarHeight: 0,
      windowHeight: 0,
      height: 0,
      isHeadBack: false,
      data: {},
      gongData: {},
      list: [
        {
          num: "100",
          title: "总学习时长",
        },
        {
          num: "100",
          title: "今日时长",
        },
        {
          num: "100",
          title: "已打卡次数",
        },
        {
          num: "100",
          title: "已学节数",
        },
        {
          num: "100",
          title: "积分排名",
        },
      ],
      list1: [],
      list2: [],
      list3: [],
      show: false,
      show1: true,
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.windowHeight = statusBarHeight.windowHeight;
    this.windowHeight_play = statusBarHeight.windowHeight;
    // this.getGongneng();
  },
  onShow: function () {
    this.show = false;
    this.show1 = true;
    this.getGongneng();
    if (this.$refs.player) {
      this.$refs.player.setIntervalT();
    }
  },
  onHide() {
    if (this.$refs.player && this.$refs.player.times) {
      clearInterval(this.$refs.player.times);
    }

    this.show = false;
    this.show1 = false;
  },
  mounted() {
    // uni.onTabBarMidButtonTap((res) => {
    //   // if (this.show1) {
    //   //   bofang_list({}).then((res) => {
    //   //     if (res.status == 200 && res.data.list && res.data.list.length) {
    //   //       this.show = true;
    //   //       this.$refs.player.getList();

    //   //       // player();
    //   //     } else {
    //         // uni.navigateTo({
    //         //   url: "/pages/stargate/Tianwen",
    //         // });
    //         uni.navigateTo({
    //           url: "/pages/distinguish/galaxy",
    //         });
    //   //     }
    //   //   });
    //   // }
    // });
  },
  methods: {
    goEdit(user_id) {
      uni.navigateTo({
        url: `/pages/detail/edit?user_id=${user_id}`,
      });
    },
    // 跳开会员页面
    goMember() {
      uni.navigateTo({
        url: "/pages/member/index",
      });
    },
    click(name) {
      this.$refs.uToast.success(`点击了第${name}个`);
    },
    change(e) {
      console.log("eeeeeee", e);
      this.currentIndex = e.index;
    },
    scroll(e) {
      if (e.target.scrollTop == 0) {
        this.isHeadBack = false;
      } else {
        this.isHeadBack = true;
      }
    },
    goPage() {
      uni.navigateTo({
        url: "/pages/setUp/setUp",
      });
      // uni.navigateTo({
      //   url: "/pages/distinguish/galaxy",
      // });
    },
    goHome() {
      uni.navigateTo({
        url: `/pages/home/home?type=my&user_id=${this.data.userInfo.user_id}`,
      });
    },
    goDetail(item) {
      uni.navigateTo({
        url: item.url,
      });
    },
    colse() {
      this.show = false;
    },
    getGongneng() {
      // 功能
      this.$http
        .userGongneng({})
        .then((res) => {
          this.gongData = res.data.gongneng;
          this.list1 = res.data.gongneng.changyonggongneng;
          this.list2 = res.data.gongneng.wodeweichuang;
          this.list3 = res.data.gongneng.wodefuwu;
          console.log(this.gongData, "功能");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });

      // 数据
      this.$http
        .userInfo({})
        .then((res) => {
          this.data = res.data;
          console.log(res.data, "数据");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.ba_img {
  margin: 0;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;

  .header {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 120rpx;
    padding-top: 40rpx;

    .title {
      width: 100%;
      height: 120rpx;
      line-height: 120rpx;
      font-size: 38rpx;
      font-weight: 400;
      color: #eeeeee;
      text-align: center;
      position: fixed;
    }

    .jiahao {
      position: absolute;
      right: 30rpx;
      top: 80rpx;
    }
  }

  .box {
    padding: 150rpx 30rpx 0rpx 30rpx;
    box-sizing: border-box;

    .top {
      display: flex;
      align-items: center;

      .top_img {
        width: 120rpx;
        height: 120rpx;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }

      .top_view {
        margin-left: 24rpx;
        flex: 1;

        .top_view_name {
          font-size: 34rpx;
          color: #eeeeee;
        }

        .top_view_text {
          display: flex;
          align-items: center;
          margin-top: 6rpx;

          .jianjie {
            width: 340rpx;
            font-size: 24rpx;
            color: #eeeeee;
            margin-left: 6rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .top_view_my {
        color: #d8d8d8;
        display: flex;
        align-items: center;
      }
    }

    .data_view {
      background: rgba(39, 39, 39, 0.5);
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      margin-top: 40rpx;

      .data_view_item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 172rpx;
        height: 152rpx;
        color: #eeeeee;

        .data_view_item_num {
          font-size: 36rpx;
        }

        .data_view_item_text {
          font-size: 24rpx;
        }
      }
    }

    .member_view {
      background: linear-gradient(135deg, #e9bd80 0%, #fcdcb3 100%);
      border-radius: 10rpx;
      padding: 40rpx;
      margin-top: 24rpx;

      .member_view_top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .member_view_top_text {
          font-size: 32rpx;
          color: #eeeeee;
        }

        .member_view_top_btn {
          width: 158rpx;
          height: 56rpx;
          background: #d1a15f;
          border-radius: 35rpx;
          text-align: center;
          line-height: 56rpx;
          font-size: 24rpx;
          color: #eeeeee;
        }
      }

      .member_view_text {
        font-size: 24rpx;
        color: #eeeeee;
        margin-top: 38rpx;
        display: flex;
        align-items: center;

        .member_view_text_item {
          margin-right: 10rpx;
        }
      }
    }

    .development {
      .development_item {
        background: rgba(39, 39, 39, 0.5);
        border-radius: 10rpx;
        margin-top: 24rpx;
        padding: 0 30rpx;

        .development_item_title {
          font-size: 30rpx;
          color: #eeeeee;
          // margin-top: 10rpx;
          padding: 24rpx 0;
        }

        .u-grid-item--hover-class {
          opacity: 1;
        }
      }

      .u-icon {
        margin-bottom: 8rpx;
      }

      .u-grid-item {
        margin-bottom: 32rpx;
      }

      .grid-text {
        font-size: 24rpx;
        color: #eeeeee;
        // padding:10rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        padding-bottom: 20rpx 0;
        /* #endif */
      }

      .grid-text1 {
        font-size: 36rpx;
        margin-bottom: 8rpx;
        padding-bottom: 0;
      }
    }
  }
}
</style>
